<template>
  <div class="chat-container">
    在线人数{{ onlineList.length }}
    <div class="chat-room">
      <div
        class="message-item"
        v-for="(item, index) in messageList"
        :key="index"
      >
        <div class="flex-left" v-if="item.userId !== userInfo">
          <div class="avatar">
            {{ "w" + item.userId }}
          </div>
          <div class="message-content" style="margin-left: 10px;">
            {{ item.content }}
          </div>
        </div>
        <div class="flex-right" v-else>
          <div class="message-content" style="margin-right: 10px;">
            {{ item.content }}
          </div>
          <div class="avatar">
            {{ "w" + item.userId }}
          </div>
        </div>
      </div>
    </div>
    <div class="send-box">
      <input
        class="message-input"
        type="text"
        v-model="yourMessage"
        @keyup.enter="sendMessage"
      />
      <button class="send-btn" @click="sendMessage">发送</button>
    </div>
  </div>
</template>
<script setup>
import { onMounted, onUnmounted, ref } from "vue";

const onlineList = ref([]);
const messageList = ref([]);
const yourMessage = ref("");
let ws = null;
// 当前页面初始化时 时间戳生成一个用户id
const userInfo = ref("");
const sendMessage = () => {
  console.log(yourMessage.value);
  if (yourMessage.value) {
    ws.send(
      JSON.stringify({
        content: yourMessage.value,
        userId: userInfo.value,
        type: "message",
      })
    );
  }
  yourMessage.value='';
};
onMounted(() => {
  userInfo.value = new Date().getTime().toString().slice(8);
  initWebsocket();
});
const initWebsocket = () => {
  ws = new WebSocket("ws://localhost:8888");
  onOpen();
  onMessage();
  error();
  close();
};
const onOpen = () => {
  {
    ws.onopen = () => {
      console.log("连接成功!");
      ws.send(
        JSON.stringify({
          type: "init",
          userId: userInfo.value,
          content: "欢迎来到聊天室",
        })
      );
    };
  }
};
// 关闭连接
const close = () => {
  ws.onclose = () => {
    console.log("关闭连接");
  };
};
// 连接出错
const error = () => {
  ws.onerror = () => {
    console.log("连接出错啦!");
  };
};
// 信息列表,客户端收到服务器的数据列表
const onMessage = () => {
  ws.onmessage = (data) => {
    let message = JSON.parse(data.data);
    console.log(message);
    let type = message.type;
    switch (type) {
      case "onlineList":
        onlineList.value.push(message.list);
        break;
      case "message":
      messageList.value.push(message);
      break;
      default:
        break;
    }
  };
  
};
onUnmounted(() => {
  close();
});
</script>
<style scoped>
.chat-container {
  width: 600px;
  height: 600px;
  overflow: hidden;
  background: #eae3e3;
  border-radius: 8px;
}

.chat-room {
  height: calc(100% - 100px);
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  background: #ecd5d5;
}
.message-item {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 10px;
}

.flex-left {
  display: flex;
  justify-content: flex-start;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
}

.avatar {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #fafafa;
}

.message-content {
  min-height: 30px;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}

.send-box {
  height: 80px;
  display: flex;
  align-items: center;
}

.message-input {
  height: 60px;
  flex: 1;
}

.send-btn {
  width: 150px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
</style>
